<template>
  <CDrawer v-model="dialogVisible" size="large" title="C-GAP评分标准">
    <div class="cgcap-container" v-if="dialogVisible" v-loading="loading">
      <p class="cgcap-title">{{ title }}</p>
      <CTable
        :data-source="dataList"
        useDataSource
        :pagination="false"
        border
        :extraTableOption="{ mergeCells: mergeCellsList }"
      >
        <vxe-column title="分值" width="80">
          <template #default="scope">
            <p v-ellTooltip>{{ scope.row.source }}</p>
          </template>
        </vxe-column>
        <vxe-column title="汽车生命周期碳排放量(X/(gCO₂e/km))">
          <template #default="scope">
            <p v-ellTooltip>{{ scope.row.emission }}</p>
          </template>
        </vxe-column>
      </CTable>
    </div>
  </CDrawer>
</template>
<script lang="ts">
export default {
  name: 'CGCAPDrawer'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref } from 'vue';
import { CTable } from '@/components/CTable/index';
import { CDrawer } from '@/components/CDrawer/index';
import type { ICalcResult } from '@/apis/pcf/myModel/model/modelDetailModel';
import { TitleMap, DataMap } from './config';

interface CGCAPDrawerProps {
  visible: boolean;
  carType: ICalcResult['carType'];
}
const props = withDefaults(defineProps<CGCAPDrawerProps>(), {});
const emit = defineEmits(['update:visible']);
const loading = ref(false);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});

/**
 * 副标题
 */
const title = computed(() => {
  return props.carType ? TitleMap[props.carType] || '-' : '-';
});

/**
 * 表格数据
 */
const dataList = computed(() => {
  return [
    ...(props.carType ? DataMap[props.carType] || [] : []),
    // 最后一行
    { source: '注：CM为车型整备质量，kg' }
  ];
});

/**
 * 合并最后行
 */
const mergeCellsList = computed(() => {
  if (dataList.value.length) {
    return [{ row: dataList.value.length - 1, col: 0, rowspan: 1, colspan: 2 }];
  }
  return [];
});
</script>
<style lang="scss" scoped>
.cgcap-container {
  padding: 0 20px 20px;
}
.cgcap-title {
  padding: 12px 0;
  width: 100%;
  height: 24px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #0a1f33;
  line-height: 24px;
  text-align: left;
  font-style: normal;
}
</style>
